<template>
  <div class="Header">
    <div class="headerNav">
      <div class="logo">
        <a href="/"><img src="../assets/img/logo.png" alt="筋斗云投票"></a>
      </div>
      <!-- 导航栏 -->
      <el-menu :default-active="defaultIndex" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1" @click="goPath(1)"><span>首页</span></el-menu-item>
        <el-menu-item index="2" @click="goPath(2)"><span>创建</span></el-menu-item>
        <el-menu-item index="3" @click="goPath(3)"><span>管理</span></el-menu-item>
        <el-menu-item index="4" @click="goPath(4)"><span>案例</span></el-menu-item>
        <el-menu-item index="5" @click="goPath(5)"><span>服务</span></el-menu-item>
        <el-menu-item index="6" @click="goPath(6)"><span>帮助</span></el-menu-item>
      </el-menu>
      <!-- 没有登录展示这里 -->
      <div class="header-fr" v-if="!userInfo">
        <div @click="goPath(8)">免费创建投票</div>
        <div @click="goPath(7)">登录/注册</div>
      </div>
      <!-- 登录成功展示 -->
      <div class="user-center-box" v-if="userInfo && token">
        <img class="user-tx" src="../assets/img/login_icon_w.png" alt="" />
        <div class="user-info">
          <p class="phone-num">{{userInfo.userName}}</p>
          <p class="lv">{{levelName[userInfo.level]}}</p>
        </div>
        <dl id="user-info-select">
          <dd>
            <img src="../assets/img/user_i.png" alt="" class="user_i" />
            <router-link to="/UserInfo">个人中心</router-link>
          </dd>
          <dd @click="loginout">
            <img src="../assets/img/cut_icon.png" alt="" class="user_i" />
            <a href="javascript:;">退出登录</a>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import User from '../../utils/user'
import Ajax from '../../utils/ajax'
export default {
  name: 'Header',
  props: ['zIndex'],
  data() {
    return {
      defaultIndex: '1',
      userInfo: null,
      token: null
    }
  },
  created() {
    this.token = User.getToken()
    this.userInfo = User.getInfo()

    this.defaultIndex = this.zIndex.toString()
    this.getInfo()
  },
  mounted() {
    this.defaultIndex = this.zIndex.toString()
  },
  methods: {
    // 编程式路由导航跳转
    goPath(e) {
      if (e === 1) {
        this.$router.push({ path: '/' })
      } else if (e === 2) {
        this.$router.push({ path: '/Create' })
      } else if (e === 3) {
        this.$router.push({ path: '/Manage' })
      } else if (e === 4) {
        this.$router.push({ path: '/Case' })
      } else if (e === 5) {
        this.$router.push({ path: '/Service' })
      } else if (e === 6) {
        this.$router.push({ path: '/Helper' })
      } else if (e === 7) {
        this.$router.push({ path: '/Login' })
      } else if (e === 8) {
        this.$router.push({ path: '/Create' })
      }
    },
    // 获取用户信息
    getInfo() {
      if (this.token) {
        Ajax.get('member/info')
          .then((res) => {
            if (res.code == 0) {
              this.userInfo = res.data
              User.saveInfo(res.data)
            } else {
              User.logout()
            }
          })
          .catch((err) => {
            console.error(err)
          })
      }
    },
    // 用户退出登录
    loginout() {
      User.logout()
      this.$router.push({ path: '/Login' })
    }
  }
}
</script>
<style scoped>
@import '../assets/css/header.css';
</style>
